<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-form">
        <div class="title-container">
          <img src="../assets/icon-logo.png" alt="logo">
          <h3 class="title">{{title}}</h3>
        </div>
        <div class="tab-box">
          <p v-for="item in loginList" :key="item" :class="{'active': currentLogin === item}" @click="changeLogin(item)">{{ item }}</p>
        </div>
        <transition name="fade-transform" mode="out-in">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" label-position="left">
            <el-form-item v-if="currentLogin === '2.0用户登录'" prop="dwbm" :rules="{ required: true, message: '单位名称不能为空！', trigger: 'change', type: 'string' }">
              <el-cascader
                ref="cascader"
                v-model="loginForm.dwbm"
                filterable
                change-on-select
                :options="companyList"
                :show-all-levels="false"
                :props="{ expandTrigger: 'hover', label: 'dwmc', value: 'dwbm', emitPath: false }"
                placeholder="请选择单位名称"
                @change="$refs.cascader.toggleDropDownVisible()"
              />
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                ref="username"
                v-model="loginForm.username"
                placeholder="请输入用户名"
                name="username"
                type="text"
                maxlength="100"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                ref="password"
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                name="password"
                maxlength="100"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-button type="primary" style="width:100%; height: 56px;" @click.native.prevent="handleLogin">登录</el-button>
          </el-form>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { LoginResource, config } from '../axios/index';
import { mapGetters, mapActions } from 'vuex';
import { encrypt } from '../util/aesUtil';
export default {
  name: 'Login',
  data() {
    return {
      loginList: ['管理员用户登录', '2.0用户登录'],
      currentLogin: '管理员用户登录',
      loginForm: {
        username: '',
        password: '',
        dwbm: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空！' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空！' }]
      },
      title: config.documentTitle
    }
  },
  mounted() {
    if (this.companyList.length === 0) {
      this.getDeptList();
    }
  },
  methods: {
    ...mapActions([
      'setCompanyList',
      'setUserInfo'
    ]),
    // 获取单位列表
    getDeptList() {
      LoginResource
      .deptList()
      .then(res => {
        if(res && res.data) {
          this.setCompanyList(res.data);
        }
      })
    },
    changeLogin(item) {
      this.currentLogin = item
      this.loginForm = {
        username: '',
        password: '',
        dwbm: ''
      }
      this.$refs.loginForm.clearValidate();
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // let index = window.location.href.indexOf('?');
          // if(index >= 0) {
          //   let urlData = window.location.href.substr(index + 1);
          //   this.$router.push({path:'/TaskManage' + '?' + urlData})
          // }
          // else {
          //   this.$router.push({path:'/TaskManage'})
          // }
          // 存储用户信息
          LoginResource
          .login({
            username: this.loginForm.username.trim(),
            password: encrypt(this.loginForm.password.trim()),
            source: this.currentLogin === '管理员用户登录' ? 'clue' : 'tyyw',
            dwbm: this.currentLogin === '管理员用户登录' ? '' : this.loginForm.dwbm
          })
          .then(res => {
            let userInfo = res.data;
            userInfo.role = this.currentLogin === '管理员用户登录' ? 1 : 2;
            this.setUserInfo(userInfo);
            window.localStorage.setItem("saToken", res.data.saToken);
            if(userInfo.role === 1) {
              this.$router.push({path:'/ManageList'});
            }
            else {
              this.$router.push({path:'/ClueMangeInquisitor'});
            }
          })
        } else {
          return false
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      companyList: "getCompanyList"
    })
  }
}
</script>

<style lang="scss">
.login-container {
  .el-input {
    display: inline-block;
    height: 56px;
    width: 100%;
    input {
      font-size: 16px;
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 4px;
      padding: 12px 5px 12px 15px;
      height: 56px;
      color: #333;
      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #fff inset !important;
        -webkit-text-fill-color: #333 !important;
      }
    }
  }
  .el-cascader {
    width: 100%;
  }
  .el-form-item {
    border: 1px solid #BCC1C7;
    border-radius: 4px;
    margin-bottom: 24px;
  }
}
</style>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  background: url('../assets/bg-login.png') no-repeat center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  .login-box {
    width: 620px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
  .login-form {
    width: 408px;
    height: 550px;
    position: relative;
  }
  .title-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 120px;
    img{
      width: 40px;
      height: 40px;
      margin-right: 24px;
    }
    .title {
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2D333C;
      line-height: 40px;
      margin: 0;
    }
  }
  .tab-box {
    margin-bottom: 64px;
    display: flex;
    justify-content: center;
    p {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
      line-height: 24px;
      cursor: pointer;
      &.active {
        position: relative;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2D333C;
        &::after {
          display: block;
          content: '';
          position: absolute;
          bottom: -12px;
          left: 50%;
          margin-left: -30px;
          width: 60px;
          height: 4px;
          background-color: #3C86F5;
          border-radius: 3px;
        }
      }
    }
    p + p {
      margin-left: 72px;
    }
  }
}
</style>
